<html>

<head>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        function setText() {
            $('p:first').text('hello');
        }

        function setHtml() {
            $('p:eq(1)').html('hello <b>world</b>!');
        }

        function setVal() {
            $('input').val('code c#');
        }

        function setTextC() {
            $('p:first').text(function (index, oldtext) {
                return 'old:' + oldtext + '|new:' + 'apple';
            });
        }

        function setHtmlC() {
            $('p:eq(1)').html(function (index, oldtext) {
                return 'old:' + oldtext + '|new:' + 'orange';
            });
        }

        function setValC() {
            $('input').val(function (index, oldtext) {
                return 'old:' + oldtext + '|new:' + 'banana';
            });
        }
        function setAttr() {
            $('a').attr('href', 'http://www.baidu.com');
        }
        function setAttrM() {
            $('a').attr({ 'href': 'http://www.qq.com', 'title': 'qq' });
        }
        function setAttrC() {
            $('a').attr('href', function (index, oldobj) {
                return oldobj + '?id=123';
            });
        }
    </script>
</head>
<div>
    <p>test</p>
    <p>test</p>
    <input type='text' value='test' />
    <button onclick="setText()">setText</button>
    <button onclick="setHtml()">setHtml</button>
    <button onclick="setVal()">setVal</button>
    <hr>
    <h3>text() html() val() 的回调函数</h3>
    <button onclick="setTextC()">setTextC</button>
    <button onclick="setHtmlC()">setHtmlC</button>
    <button onclick="setValC()">setValC</button>
    <h3>attr()设置值</h3>
    <a href="#">link</a><br>
    <button onclick="setAttr()">setAttr</button>
    <button onclick="setAttrM()">setAttrM</button>
    <button onclick="setAttrC()">setAttrC</button>
</div>

</html>